<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
	<meta name="apple-mobile-web-app-capable" content="no" />
	<title>统采商城</title>
	<link rel="stylesheet" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/font/iconfont.css">
	<link href="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/css/dropload.css" rel="stylesheet" />
	<style type="text/css">
		.header {position: fixed;height: 45px;top: 0;width: 100%;padding: 0 45px;background-color: #fff;line-height: 45px;z-index: 1;}
		.header .back {position: absolute;left: 0;width: 45px;height: 100%;font-size: 18px;font-weight: 800;text-align: center;}
		.header .search-wrap {position: relative;top: 50%;height: 32px;margin-top: -16px;background-color: #ededed;line-height: 32px;border-radius: 3px;border-bottom: solid 1px #efefef;}
		.header .search-wrap .iconfont {position: absolute;left: 5px;height: 100%;color: #999;}
		.header .search {width: 100%;padding: 5px 5px 5px 24px;height: 100%;margin: 0;border: none;border-radius: 0;line-height: inherit;background-color: transparent;}
		::-webkit-input-placeholder {font-size: 14px;color: #ccc;}
		.ctn {margin: 46px 0 0;}
		.ctn .img-wrap {width: 100%;line-height: normal;font-size: 0;}
		.ctn .img-wrap img {width: 100%;}
		.qusetion {background-color: #f7f7f7;font-size: 13px;color: #333;}
		.qusetion .item {display: block;position: relative;line-height: 35px;padding-left: 10px;background-size: cover;background-repeat: no-repeat;margin-bottom: 3px;margin-left: 1px;color: #fff;font-size: 16px;font-weight: bold;}
		.qusetion .item .text {padding-left: 3px;height: 100%;}
		/*.qusetion .item .iconfont {position: absolute;right: 12px;top: 0;height: 100%;transform: rotate(180deg);color: #aaa;}*/
		.gzh {position: fixed;bottom: 0;width: 100%;line-height: 40px;margin-top: 12px;background-color: #fff;text-align: center;color: #e54242;font-size: 14px;}
		a {color: currentColor;}
		.nav {display: flex;align-items: center;height: 38px;margin-bottom: 8px;padding: 0 12px;line-height: 38px;background-color: #fff;color: #333;font-size: 12px;text-align: center;overflow-x: auto;}
		/*.nav .item:first-child {margin: 0 28px 0 0;}*/
		.nav .item {flex: 1;margin: 0 5px;text-overflow: ellipsis;white-space: nowrap;}
		.nav .sep {width: 1px;height: 35%;background-color: #f3f3f3;}
		.nav .sep:last-child {display: none;}
		.nav span {display: inline-block;height: 16px;line-height: 16px;font-size: 12px;}
		.nav .on span {position: relative;display: inline-block;background-color: #F26633;color: #fff;padding: 0;}
		.nav .on span:after {content: "";position: absolute;left: -16px;border: 8px solid #F26633;border-top-color: transparent;border-bottom-color: transparent;border-left-color: transparent;}
		.nav .on span:before {content: "";position: absolute;right: -16px;border: 8px solid #F26633;border-top-color: transparent;border-bottom-color: transparent;border-right-color: transparent;}
	</style>
 </head>
 <body>
 	<div class="header">
 		<div class="back iconfont icon-fanhui1" onclick="location=location.origin+'/mobile/index'"></div>
 		<div class="search-wrap">
 			<div class="iconfont icon-search"></div>
 			<input type="text" class="search" name="" placeholder="搜索问题">
 		</div>
 	</div>
 	<div class="ctn">
 		<div class="img-wrap">
 			<img id="banner" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/img/index/novicebg.png">
 		</div>
 		<div class="nav">
	 		{{if .column}}
	 		{{range $i,$v := .column}}
	 		<div class="item {{if eq $i 0}}on{{end}}" data-path="{{.pathname}}" data-id="{{.id}}"><span>{{.name}}</span></div>
	 		<span class="sep"></span>
	 		{{end}}
	 		{{end}}
 		</div>
 		<div class="qusetion">
 			{{range .ctn}}
 			<a class="item" href="/mobile/index/novicectn?id={{.id}}">
 				<div class="text">{{.title}}</div>
 				<!-- <span class="iconfont icon-fanhui1"></span> -->
 			</a>
 			{{end}}
 		</div>
 	</div>
	<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/sui/js/SUI.js?"></script>
	<script type="text/javascript" src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/frame/mui/js/mui.min.js"></script>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/zepto.min.js"></script>
	<script src="https://tcsc.oss-cn-hangzhou.aliyuncs.com/static/wechat/js/dropload.min.js"></script>
	<script type="text/javascript">
		var page = 2
		var index = 0
		var cid = ''
		var search = ""
		var arr = new Array(mui('.nav .item').length)
		var qusetion = mui('.qusetion')[0]
		var bgimgs = {{.bgimg}}
		colour()
		Array.from(mui('.nav .item')).map(function (v, i) {
			v.index = i
			arr[i] = {
				page: 2
			}
		})
		mui('#banner')[0].src = mui('.nav .item')[0].getAttribute('data-path')
		$.ajax({
			url: location.origin + location.pathname,
			data: { cid: mui('.nav .item')[0].getAttribute('data-id') },
			success: function (res) {
				mui('.search')[0].value = ""
				search = ""
				if (page) {
					dropload()
				}
				var data = res.ctn
				var html = ''
				if (data) {
					data.forEach(function (v) {
						html += `<a class="item" href="/mobile/index/novicectn?id=${v.id}">
					 				<div class="text">${v.title}</div>
					 			</a>`
					})
				}
				arr[0].html = html
				qusetion.innerHTML = html
				colour()
			},
			error: function(xhr, type){
            	mui.toast("网络慢，请重新刷新!");
            	me.resetload();
            }
		})
		arr[0].html = qusetion.innerHTML
		mui('.nav').on('tap', '.item', function () {
			var id = this.getAttribute('data-id')
			index = this.index
			page = arr[index].page
			cid = id
			if (this.classList.contains('on') && search == "") {
				if (page) {
					dropload()
				}
				return 
			}
			mui('#banner')[0].src = this.getAttribute('data-path')
			mui('.nav .on')[0].classList.remove('on')
			this.classList.add('on')
			if (arr[index].html != undefined && search == "") {
				qusetion.innerHTML = arr[index].html
				if (page) {
					dropload()
				}
				colour()
				return
			}
			$.ajax({
				url: location.origin + location.pathname,
				data: { cid: id },
				success: function (res) {
					mui('.search')[0].value = ""
					search = ""
					if (page) {
						dropload()
					}
					var data = res.ctn
					var html = ''
					if (data) {
						data.forEach(function (v) {
							html += `<a class="item" href="/mobile/index/novicectn?id=${v.id}">
						 				<div class="text">${v.title}</div>
						 			</a>`
						})
					}
					arr[index].html = html
					qusetion.innerHTML = html
					colour()
				},
				error: function(xhr, type){
	            	mui.toast("网络慢，请重新刷新!");
	            	me.resetload();
	            }
			})
		})

		document.getElementsByClassName("search")[0].addEventListener("keydown", function (e) {
			search = this.value.trim()
			if (e.keyCode != 13) {
				return 
			}
			$.ajax({
				url: location.origin + location.pathname,
				data: { cid: cid, search: search},
				success: function (res) {
					arr[index].page = 2
					var data = res.ctn
					var html = ''
					if (data) {
						data.forEach(function (v) {
							html += `<a class="item" href="/mobile/index/novicectn?id=${v.id}">
						 				<div class="text">${v.title}</div>						 				
						 			</a>`
						})
					}
					arr[index].html = undefined
					qusetion.innerHTML = html
					colour()
				},
				error: function(xhr, type){
	            	mui.toast("网络慢，请重新刷新!");
	            	me.resetload();
	            }
			})
			this.blur()
		})
		dropload()
		function dropload() {
			$('.element').dropload({
				scrollArea : window,
				loadDownFn : function(me){
			        $.ajax({
			            type: 'GET',
			            url: window.location.href,
			            dataType: 'json',
			            data:{page:page, cid:cid, search: search},
			            success: function(data){
			            	data = data.ctn
			            	if (data) {
			            		me.resetload();
			            		var html = arr[index].html
			            		for (var v of data) {
			            			html += `<a class="item" href="/mobile/index/novicectn?id=${v.id}">
								 				<div class="text">${v.title}</div>								 				
								 			</a>`
			            		}
			            		arr[index].html = html
			            		arr[index].page = page = page + 1
			            		qusetion.innerHTML = html
			            		colour()
			            		me.resetload();
			            	} else {
		            			arr[index].page = page = 0
			            		mui.toast("没有更多了！");
			                    $(".dropload-down").remove();
			            	}
			            },
			            error: function(xhr, type){
			                mui.toast("网络慢，请重新刷新!");
			                me.resetload();
			            }
			        });
			    }
			})
		}
		function colour() {
			var i = 0
			var len = bgimgs.length
			$('.qusetion > .item').each(function () {
				i %= len
				$(this).css('background-image', 'url("' + bgimgs[i++] + '")')
			})
		}
	</script>
 </body>
 </html>